<template>
	<view class="container">
		<view class="bank-icon-header">
			<view class="bank-icon"></view>
		</view>
		
		<view class="order-info flex justify-between">
			<view class="flex align-center">
				<text class="label">付款金额:</text>
				<text class="value">{{$Route.query.money}}元</text>
			</view>
			<view class="flex align-center">
				<text class="label">付款人:</text>
				<text class="value">{{getUserInfo.username}}</text>
			</view>
		</view>
		
	    <view class="bank-form">
			<view class="flex form-item justify-between align-center">
				<text class="label">收款名称</text>
				<text class="value">{{bankInfo.bank_name}}</text>
				<text class="copy-icon" @tap="copy(bankInfo.bank_name)"></text>
			</view>
			<view class="flex form-item justify-between align-center">
				<text class="label">收款账户</text>
				<text class="value">{{bankInfo.bank_huming}}</text>
				<text class="copy-icon" @tap="copy(bankInfo.bank_huming)"></text>
			</view>
			<view class="flex form-item justify-between align-center">
				<text class="label">开户行</text>
				<text class="value">{{bankInfo.bank_zhi}}</text>
				<text class="copy-icon" @tap="copy(bankInfo.bank_zhi)"></text>
			</view>
		</view>
		<view class="pay-method flex justify-between align-center">
			<text class="label">支付方式</text>
			<text class="value">网银转账</text>
		</view>
		<view class="pay-name flex align-center">
			<text class="label-name">付款人姓名:</text>
			<u-input class="pay-input" type="text" v-model="payName" />
		</view>
		<view class="tip-wrapper flex">
			<view class="tip-icon"></view>
			<text class="tip-text">手机操作：可复制相关信息通过手机客户端操作</text>
		</view>
		
		<view class="common-btn submit-btn" @tap="submit">支付成功，提醒收款</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				bankInfo:{},
				payName:""
			};
		},
		computed:{
			...mapGetters("user", ["getUserInfo"]),
		},
		methods:{
			async submit(){
				if(!this.payName){
					uni.showToast({
						icon:"none",
						title:"请输入付款人姓名"
					})
					return false
				}
				await this.$u.api.bankTransferApi({
					money:this.$Route.query.money,
					order_id:this.payName
				})
				uni.showToast({
					icon:"success",
					title:"申请成功，等待后台审核"
				})
				setTimeout(()=>{
					this.$Router.back(1)
				},1000)
			},
			copy(value){
				uni.setClipboardData({
				    data: value,
				    success: function () {
				        uni.showToast({
				        	icon:"success",
							title:"复制成功"
				        })
				    }
				});
			}
		},
		async onLoad() {
			try{
				this.bankInfo=await this.$u.api.getBankInfoApi()
			}catch(e){
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
.container{
	.bank-icon-header{
		padding: 24rpx;
		background: #E7F1FF;
		.bank-icon{
			width: 180rpx;
			height: 46rpx;
			background: url("~@/static/images/bankCardCharge/bank-icon.png");
			background-size: 100% 100%;
		}
	}
	.order-info{
		margin: 30rpx 24rpx;
		padding: 0 30rpx;
		height: 102rpx;
		background: #2F6DFD;
		box-shadow: 0px 4rpx 20rpx 0px rgba(47,109,253,0.25);
		border-radius: 12rpx;
		.label{
			margin-right: 10rpx;
			font-size: 24rpx;
			color: #fff;
		}
		.value{
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
		}
	}
	.bank-form{
		background-color: #FFFFFF;		.form-item{
			padding:28rpx 24rpx;
			border-bottom: 1rpx solid $color-gray;
			&:last-child{
				border-bottom: none;
			}
			.label{
				width: 160rpx;
				font-size: 30rpx;
				color: #333333;
			}
			.value{
				margin-left: 26rpx;
				margin-right: auto;
				font-size: 30rpx;
				color: #333333;
				text-align: left;
			}
			.copy-icon{
				height: 44rpx;
				width: 44rpx;
				background: url("~@/static/images/bankCardCharge/copy-icon.png");
				background-size: 100% 100%;
			}
		}
		
	}
	.pay-method{
		margin-top: 24rpx;
		padding: 0 30rpx;
		height: 96rpx;
		background: #FFFFFF;
		.label{
			font-size: 30rpx;
			color: #333333;
		}
		.value{
			font-size: 30rpx;
			color: #333333;
		}
		.pay-input{
			flex:1;
		}
	}
	.pay-name{
		margin-top: 30rpx;
		padding:15rpx 30rpx;
		background-color: #fff;
		.label-name{
			margin-right: 30rpx;
			font-size: 24rpx;
			color: #333;
		}
	}
	.tip-wrapper{
		margin-top: 24rpx;
		padding: 0 24rpx;
		.tip-icon{
			margin-right: 22rpx;
			width: 32rpx;
			height: 32rpx;
			background: url("~@/static/images/bankCardCharge/tip-icon.png");
			background-size: 100% 100%;
		}
		.tip-text{
			font-size: 26rpx;
			color: #999999;
		}
	}
	.submit-btn{
		margin: 68rpx 30rpx;
	}
}
</style>
